<!--
 * @Description:导入数据
 * @Author: jiansheng
 * @Date: 2023-04-26 09:07:44
-->
<template>
  <n-modal v-model:show="drawerVisible" :on-update-show="closeModal" :on-mask-click="closeModal" :on-esc="closeModal">
    <n-card
      style="width: 600px"
      title="用户导入"
      :bordered="false"
      size="huge"
      role="dialog"
      aria-modal="true"
      :header-style="{ padding: '20px' }"
      :footer-style="{ padding: '20px' }"
    >
      <template #header-extra>
        <svg-icon class="text-20px cursor-pointer hover-text-blue" local-icon="close" @click="closeModal"></svg-icon>
      </template>

      <!--内容 -->
      <div>
        <uploadFile :immediate-upload="false" :accept="9" list-type="text" is-dragger @pending-file="getPendingFile">
          <div>
            <n-text style="font-size: 16px"> 点击或者拖动文件到该区域来上传 </n-text>
            <n-p depth="3" class="m-t-2 color-red"> 仅允许导入“xls”或“xlsx”格式文件！ </n-p>
          </div>
        </uploadFile>
        <div class="flex justify-between m-t-2">
          <n-checkbox v-model:checked="updateSupport"> 是否更新已经存在的用户数据 </n-checkbox>
          <n-button quaternary type="info" :loading="loading" :disabled="loading" @click="downloadTemplate">
            下载模板
          </n-button>
        </div>
      </div>

      <template #footer>
        <div class="flex justify-end">
          <n-button ghost class="mr-5px" @click="closeModal">关闭</n-button>
          <n-button type="info" @click="importExcel">确认</n-button>
        </div>
      </template>
    </n-card>
  </n-modal>
</template>
<script setup lang="ts">
// import { importTemplate, importData } from '@/service/api/system/user';
// import { resolveBlob } from '@/utils/common';

const updateSupport = ref(false);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});
const drawerVisible = ref(false);
watch(
  () => props.visible,
  val => {
    drawerVisible.value = val;
  },
  { immediate: true }
);

// 下载模板
const loading = ref(false);
const downloadTemplate = async () => {
  loading.value = true;
  // importTemplate()
  //   .catch(() => {
  //     loading.value = false;
  //   })
  //   .then((r: any) => {
  //     loading.value = false;
  //     resolveBlob(r.data.data, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', '模板');
  //   });
};

// 导入
const emit = defineEmits(['importSuccess', 'update:visible']);
let excelFile: string | Blob = '';
// 获取当前上传的附件
const getPendingFile = (file: any) => {
  excelFile = file;
};
const importExcel = async () => {
  if (!excelFile) {
    window.$message?.warning('请上传附件');
    return;
  }

  // const formData = new FormData();
  // formData.append('file', excelFile);
  // const { data } = await importData(String(updateSupport.value), formData);
  // if (data) {
  //   window.$dialog?.success({
  //     title: '导入成功',
  //     content: (data as any).msg,
  //     positiveText: '确定'
  //   });

  //   emit('importSuccess');
  // }
};

// 关闭
const closeModal = () => {
  emit('update:visible', false);
};
</script>
